<!-- 图表页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>节点监控对比</title>
    <link href="../../../../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../../../lib/ui/js/plugins/datepicker/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../../../../content/pc/sysmgt/chartPage/chartPage.css"/>
    <style>
        .chart-container{
            height: calc(100% - 160px);
            overflow:auto;
        }
    </style>
</head>
<body class="layui-view-body outside-container">
 <button style="color: #fff;border: none;padding: 5px 5px;border-radius: 5px;background: #12b886;float: right" onclick="window.history.back()">返回</button>
<div class="header-container">
       #if(authorization!=null)
        <input type="hidden" id="authorization" value="#(authorization)">
       #end
    #if(datasoureId!=null)
    <input type="hidden" id="datasoureId" value="#(datasoureId)">
    #end
        <form class="form-inline">
            <!-- 节点 -->
            <div class="row">
                <div class="col-md-12 col-lg-12">
                    <label for="nodeSelect">链ID：</label>
                    <select class="form-control select-width" id="chainId" placholder="请选择链ID">
                        #if(chainIdList!=null)
                            #for(x:chainIdList)
                                #if(chainId!=null && x==chainId)
                                <option class="node-option" selected value=#(x.asText())>#(x.asText())</option>
                                #else
                                <option class="node-option" value=#(x.asText())>#(x.asText())</option>
                                #end
                            #end
                        #end
                    </select>
                    <label for="nodeSelect">节点名称：</label>
                    <select class="form-control select-width" id="nodeSelect" placholder="请选择节点名">
                        #if(chainJobList!=null)
                            #for(x:chainJobList)
                                #if(job!=null && x.get("job").asText()==job)
                                <option class="node-option" selected value=#(x.get("job").asText())>#(x.get("job").asText())</option>
                                #else
                                <option class="node-option" value=#(x.get("job").asText())>#(x.get("job").asText())</option>
                                #end
                            #end
                        #end
                    </select>
                </div>
            </div>
            <!-- 显示日期、对比日期、起止时间 -->
            <div class="row">
                <div class="col-md-4 col-lg-4">
                    <label for="display-date">显示日期：</label>
                    <input type="text" class="form-control" id="display-date" name="display-date" placeholder="显示日期">
                </div>
                <div class="col-md-4 col-lg-4">
                    <label for="comparison-date">对比日期：</label>
                    <input type="text" class="form-control" id="comparison-date" name="comparison-date" placeholder="对比日期">
                </div>
                <div class="col-md-4 col-lg-4">
                    <div class="row">
                        <div class="col-md-3 col-lg-3">
                            <label for="time" style="line-height:2.5">起止时间：</label>
                        </div>
                        <div class="col-md-9 col-lg-9 input-group input-daterange">
                            <input type="time" step="2" class="form-control timepicker" id="timeBefore" name="time" placeholder="开始时间">
                            <div class="input-group-addon">至</div>
                            <input type="time" step="2" class="form-control timepicker" id="timeAfter" name="time" placeholder="结束时间">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 数据粒度 -->
            <div class="row">
                <div class="col-md-12 col-lg-12 inlineRadioDiv">
                    <label for="data-granularity">数据粒度：</label>
                    <div id="radioGroup"  class="radio-inline">
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio1" checked value="300"> 五分钟
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="60"> 1分钟
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="5"> 5秒钟
                        </label>
                    </div>
                    <button type="button" onclick="submitClick()" class="btn btn-info">确 认</button>
                </div>
            </div>
        </form>
   </div>
   <!-- 图表区域 -->
   <div class="chart-container">
        <div class="row">
            <div class="col-md-6 col-lg-6 chart-col">
                <div id="chainmakerBlockCounter" class="chart-container-div">

                </div>
            </div>
            <div class="col-md-6 col-lg-6 chart-col">
                <div id="chainmakerTxPoolSize" class="chart-container-div">

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-lg-6 chart-col">
                <div id="chainmakerTxCounter" class="chart-container-div">

                </div>
            </div>
            <div class="col-md-6 col-lg-6 chart-col">
                <div id="chainmakerAvgBlockSize" class="chart-container-div">
                    
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-lg-6 chart-col">
                <div id="chainmakerAvgBlockOutput" class="chart-container-div">

                </div>
            </div>
            <div class="col-md-6 col-lg-6 chart-col">
                <div id="chainmakerAvgTps" class="chart-container-div">
                    
                </div>
            </div>
        </div>
   </div>
</div>
<script src="../../../../../lib/jquery/jquery.min.js"></script>
<script src="../../../../../lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../../../lib/ui/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="../../../../../lib/echarts4.4/echarts.min.js"></script>
<script>

    //查看区块高度
    function chainmakerBlockCounter() {
        let authorization = $("#authorization").val();
        let datasoureId = $("#datasoureId").val();//数据源ID
        let chainId = $("#chainId").val(); //链Id
        let job=$('#nodeSelect').val();//节点值
        let date=$('#display-date').val();//显示日期值
        let contrastDate=$('#comparison-date').val();//对比日期值
        let startHour=$('#timeBefore').val();//起时间值
        let endHour=$('#timeAfter').val();//止时间值
        let step = $("input[name='inlineRadioOptions']:checked").val(); //数据颗粒度值
        var data={
            chainId:chainId,
            job:job,
            date:date,
            contrastDate:contrastDate,
            startHour:startHour,
            endHour:endHour,
            step:step,
            datasoureId:datasoureId,
            authorization,authorization
        };
        $.post("/sysadmin/machineMonitor/chainmakerBlockCounter",data,function(result){
            var echartData = [];
            //判断是不是数组
            if(Array.isArray(result[0]) && result[0].length>0){
                var valuesArray = result[0][0].values;
                //转换成只显示时分的数据格式
                var data1 = valuesArray.map(function(item) {
                    var date = new Date(item[0] * 1000);
                    var time = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
                    return [time, parseFloat(item[1])];
                });
                var object1 = {
                    name: '显示日数据',
                    data: data1.map(function(item) {
                        return [item[0], item[1]];
                    }),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#0080ff',
                    },
                    itemStyle: {
                        color: '#0080ff',
                    }
                };
                //加入数组中
                echartData.push(object1);
            }
            //判断是不是数组
            if(Array.isArray(result[1]) && result[1].length>0){
                var valuesArray2 = result[1][0].values;
                //转换成只显示时分的数据格式
                var data2 = valuesArray2.map(function(item) {
                    var date = new Date(item[0] * 1000);
                    var time = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
                    return [time, parseFloat(item[1])];
                });
                var object2 = {
                    name: '对比日数据',
                    data: data2.map(function(item) {
                        return [item[0], item[1]];
                    }),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#ff0000',
                    },
                    itemStyle: {
                        color: '#ff0000',
                    }
                };
                //加入数组中
                echartData.push(object2);
            }
            //echart渲染
            chartRender('chainmakerBlockCounter',echartData,'区块高度');

        },"json");
    }

    //查看区块交易池数量
    function chainmakerTxPoolSize() {
        let authorization = $("#authorization").val();
        let datasoureId = $("#datasoureId").val();//数据源ID
        let chainId = $("#chainId").val(); //链Id
        let job=$('#nodeSelect').val();//节点值
        let date=$('#display-date').val();//显示日期值
        let contrastDate=$('#comparison-date').val();//对比日期值
        let startHour=$('#timeBefore').val();//起时间值
        let endHour=$('#timeAfter').val();//止时间值
        let step = $("input[name='inlineRadioOptions']:checked").val(); //数据颗粒度值
        var data={
            chainId:chainId,
            job:job,
            date:date,
            contrastDate:contrastDate,
            startHour:startHour,
            endHour:endHour,
            step:step,
            datasoureId:datasoureId,
            authorization,authorization
        };
        $.post("/sysadmin/machineMonitor/chainmakerTxPoolSize",data,function(result){
            var echartData = [];
            //判断是不是数组
            if(Array.isArray(result[0]) && result[0].length>0){
                var valuesArray = result[0][0].values;
                //转换成只显示时分的数据格式
                var data1 = valuesArray.map(function(item) {
                    var date = new Date(item[0] * 1000);
                    var time = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
                    return [time, parseFloat(item[1])];
                });
                var object1 = {
                    name: '显示日数据',
                    data: data1.map(function(item) {
                        return [item[0], item[1]];
                    }),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#0080ff',
                    },
                    itemStyle: {
                        color: '#0080ff',
                    }
                };
                //加入数组中
                echartData.push(object1);
            }
            //判断是不是数组
            if(Array.isArray(result[1]) && result[1].length>0){
                var valuesArray2 = result[1][0].values;
                //转换成只显示时分的数据格式
                var data2 = valuesArray2.map(function(item) {
                    var date = new Date(item[0] * 1000);
                    var time = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
                    return [time, parseFloat(item[1])];
                });
                var object2 = {
                    name: '对比日数据',
                    data: data2.map(function(item) {
                        return [item[0], item[1]];
                    }),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#ff0000',
                    },
                    itemStyle: {
                        color: '#ff0000',
                    }
                };
                //加入数组中
                echartData.push(object2);
            }
            //echart渲染
            chartRender('chainmakerTxPoolSize',echartData,'交易池数量');

        },"json");
    }

    //查看待打包交易数
    function chainmakerTxCounter() {
        let authorization = $("#authorization").val();
        let datasoureId = $("#datasoureId").val();//数据源ID
        let chainId = $("#chainId").val(); //链Id
        let job=$('#nodeSelect').val();//节点值
        let date=$('#display-date').val();//显示日期值
        let contrastDate=$('#comparison-date').val();//对比日期值
        let startHour=$('#timeBefore').val();//起时间值
        let endHour=$('#timeAfter').val();//止时间值
        let step = $("input[name='inlineRadioOptions']:checked").val(); //数据颗粒度值
        var data={
            chainId:chainId,
            job:job,
            date:date,
            contrastDate:contrastDate,
            startHour:startHour,
            endHour:endHour,
            step:step,
            datasoureId:datasoureId,
            authorization,authorization
        };
        $.post("/sysadmin/machineMonitor/chainmakerTxCounter",data,function(result){
            var echartData = [];
            //判断是不是数组
            if(Array.isArray(result[0]) && result[0].length>0){
                var valuesArray = result[0][0].values;
                //转换成只显示时分的数据格式
                var data1 = valuesArray.map(function(item) {
                    var date = new Date(item[0] * 1000);
                    var time = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
                    return [time, parseFloat(item[1])];
                });
                var object1 = {
                    name: '显示日数据',
                    data: data1.map(function(item) {
                        return [item[0], item[1]];
                    }),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#0080ff',
                    },
                    itemStyle: {
                        color: '#0080ff',
                    }
                };
                //加入数组中
                echartData.push(object1);
            }
            //判断是不是数组
            if(Array.isArray(result[1]) && result[1].length>0){
                var valuesArray2 = result[1][0].values;
                //转换成只显示时分的数据格式
                var data2 = valuesArray2.map(function(item) {
                    var date = new Date(item[0] * 1000);
                    var time = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
                    return [time, parseFloat(item[1])];
                });
                var object2 = {
                    name: '对比日数据',
                    data: data2.map(function(item) {
                        return [item[0], item[1]];
                    }),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#ff0000',
                    },
                    itemStyle: {
                        color: '#ff0000',
                    }
                };
                //加入数组中
                echartData.push(object2);
            }
            //echart渲染
            chartRender('chainmakerTxCounter',echartData,'交易数');

        },"json");
    }

    //查看交易类请求数
    function chainmakerAvgBlockSize() {
        let authorization = $("#authorization").val();
        let datasoureId = $("#datasoureId").val();//数据源ID
        let chainId = $("#chainId").val(); //链Id
        let job=$('#nodeSelect').val();//节点值
        let date=$('#display-date').val();//显示日期值
        let contrastDate=$('#comparison-date').val();//对比日期值
        let startHour=$('#timeBefore').val();//起时间值
        let endHour=$('#timeAfter').val();//止时间值
        let step = $("input[name='inlineRadioOptions']:checked").val(); //数据颗粒度值
        var data={
            chainId:chainId,
            job:job,
            date:date,
            contrastDate:contrastDate,
            startHour:startHour,
            endHour:endHour,
            step:step,
            datasoureId:datasoureId,
            authorization,authorization
        };
        $.post("/sysadmin/machineMonitor/chainmakerAvgBlockSize",data,function(result){
            var echartData = [];
            //判断是不是数组
            if(Array.isArray(result[0]) && result[0].length>0){
                var valuesArray = result[0][0].values;
                //转换成只显示时分的数据格式
                var data1 = valuesArray.map(function(item) {
                    var date = new Date(item[0] * 1000);
                    var time = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
                    return [time, parseFloat(item[1])];
                });
                var object1 = {
                    name: '显示日数据',
                    data: data1.map(function(item) {
                        return [item[0], item[1]];
                    }),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#0080ff',
                    },
                    itemStyle: {
                        color: '#0080ff',
                    }
                };
                //加入数组中
                echartData.push(object1);
            }
            //判断是不是数组
            if(Array.isArray(result[1]) && result[1].length>0){
                var valuesArray2 = result[1][0].values;
                //转换成只显示时分的数据格式
                var data2 = valuesArray2.map(function(item) {
                    var date = new Date(item[0] * 1000);
                    var time = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
                    return [time, parseFloat(item[1])];
                });
                var object2 = {
                    name: '对比日数据',
                    data: data2.map(function(item) {
                        return [item[0], item[1]];
                    }),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#ff0000',
                    },
                    itemStyle: {
                        color: '#ff0000',
                    }
                };
                //加入数组中
                echartData.push(object2);
            }
            //echart渲染
            chartRender('chainmakerAvgBlockSize',echartData,'平均块大小');

        },"json");
    }

    //查看查询类请求类
    function chainmakerAvgBlockOutput() {
        let authorization = $("#authorization").val();
        let datasoureId = $("#datasoureId").val();//数据源ID
        let chainId = $("#chainId").val(); //链Id
        let job=$('#nodeSelect').val();//节点值
        let date=$('#display-date').val();//显示日期值
        let contrastDate=$('#comparison-date').val();//对比日期值
        let startHour=$('#timeBefore').val();//起时间值
        let endHour=$('#timeAfter').val();//止时间值
        let step = $("input[name='inlineRadioOptions']:checked").val(); //数据颗粒度值
        var data={
            chainId:chainId,
            job:job,
            date:date,
            contrastDate:contrastDate,
            startHour:startHour,
            endHour:endHour,
            step:step,
            datasoureId:datasoureId,
            authorization,authorization
        };
        $.post("/sysadmin/machineMonitor/chainmakerAvgBlockOutput",data,function(result){
            var echartData = [];
            //判断是不是数组
            if(Array.isArray(result[0]) && result[0].length>0){
                var valuesArray = result[0][0].values;
                //转换成只显示时分的数据格式
                var data1 = valuesArray.map(function(item) {
                    var date = new Date(item[0] * 1000);
                    var time = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
                    return [time, parseFloat(item[1])];
                });
                var object1 = {
                    name: '显示日数据',
                    data: data1.map(function(item) {
                        return [item[0], item[1]];
                    }),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#0080ff',
                    },
                    itemStyle: {
                        color: '#0080ff',
                    }
                };
                //加入数组中
                echartData.push(object1);
            }
            //判断是不是数组
            if(Array.isArray(result[1]) && result[1].length>0){
                var valuesArray2 = result[1][0].values;
                //转换成只显示时分的数据格式
                var data2 = valuesArray2.map(function(item) {
                    var date = new Date(item[0] * 1000);
                    var time = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
                    return [time, parseFloat(item[1])];
                });
                var object2 = {
                    name: '对比日数据',
                    data: data2.map(function(item) {
                        return [item[0], item[1]];
                    }),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#ff0000',
                    },
                    itemStyle: {
                        color: '#ff0000',
                    }
                };
                //加入数组中
                echartData.push(object2);
            }
            //echart渲染
            chartRender('chainmakerAvgBlockOutput',echartData,'平均出块周期');

        },"json");
    }

    //查看平均tps
    function chainmakerAvgTps() {
        let authorization = $("#authorization").val();
        let datasoureId = $("#datasoureId").val();//数据源ID
        let chainId = $("#chainId").val(); //链Id
        let job=$('#nodeSelect').val();//节点值
        let date=$('#display-date').val();//显示日期值
        let contrastDate=$('#comparison-date').val();//对比日期值
        let startHour=$('#timeBefore').val();//起时间值
        let endHour=$('#timeAfter').val();//止时间值
        let step = $("input[name='inlineRadioOptions']:checked").val(); //数据颗粒度值
        var data={
            chainId:chainId,
            job:job,
            date:date,
            contrastDate:contrastDate,
            startHour:startHour,
            endHour:endHour,
            step:step,
            datasoureId:datasoureId,
            authorization,authorization
        };
        $.post("/sysadmin/machineMonitor/chainmakerAvgTps",data,function(result){
            var echartData = [];
            //判断是不是数组
            if(Array.isArray(result[0]) && result[0].length>0){
                var valuesArray = result[0][0].values;
                //转换成只显示时分的数据格式
                var data1 = valuesArray.map(function(item) {
                    var date = new Date(item[0] * 1000);
                    var time = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
                    return [time, parseFloat(item[1])];
                });
                var object1 = {
                    name: '显示日数据',
                    data: data1.map(function(item) {
                        return [item[0], item[1]];
                    }),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#0080ff',
                    },
                    itemStyle: {
                        color: '#0080ff',
                    }
                };
                //加入数组中
                echartData.push(object1);
            }
            //判断是不是数组
            if(Array.isArray(result[1]) && result[1].length>0){
                var valuesArray2 = result[1][0].values;
                //转换成只显示时分的数据格式
                var data2 = valuesArray2.map(function(item) {
                    var date = new Date(item[0] * 1000);
                    var time = date.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
                    return [time, parseFloat(item[1])];
                });
                var object2 = {
                    name: '对比日数据',
                    data: data2.map(function(item) {
                        return [item[0], item[1]];
                    }),
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#ff0000',
                    },
                    itemStyle: {
                        color: '#ff0000',
                    }
                };
                //加入数组中
                echartData.push(object2);
            }
            //echart渲染
            chartRender('chainmakerAvgTps',echartData,'平均TPS');

        },"json");
    }

    //点击确认事件
    function submitClick(){
        chainmakerBlockCounter();//区块高度
        chainmakerTxPoolSize();//交易池数量
        chainmakerTxCounter();//待打包交易数
        chainmakerAvgBlockSize();//平均块大小
        chainmakerAvgBlockOutput();//平均出块周期
        chainmakerAvgTps();//平均tps
    }


    //echart渲染方法
    function chartRender(id,data,name) {
        let Xdata
        if(Array.isArray(data) && data.length>0){
             Xdata  = data[0].data.map(function(item) {
                return item[0];
            });
        }else{
            Xdata= ['00:00', '00:50', '01:40', '02:30', '03:20', '04:10', '05:00','05:50','06:40','07:30','08:20','09:10','10:00','10:50']

        }
        let myChartType=echarts.init(document.getElementById(id));
        let optionType = {
            legend: {
                show: true,
                type: 'plain',
                data: ['显示日数据', '对比日数据']
            },
            tooltip: {
                show: true,
                trigger: 'axis', // 修改为axis触发类型
                formatter: function(params) {
                    var time = params[0].axisValue; // 获取x轴值
                    var str = time + '<br/>'; // 初始化字符串
                    // 遍历每个series的数据
                    params.forEach(function(param) {
                        var seriesName = param.seriesName;
                        var value = param.value[1];
                        str += seriesName + ': ' + value + '<br/>'; // 拼接提示字符串
                    });
                    return str;
                }
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                }
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#C7C7C7',
                        type: 'dashed'
                    }
                },
                data: Xdata //x轴数据
            },
            yAxis: {
                type: 'value',
                name: name,
                nameTextStyle: {
                    color: '#0080ff',
                    fontWeight: 'bold'
                },
                nameLocation: 'end',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#C7C7C7',
                        type: 'dashed'
                    }
                },
            },
            series: data
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartType.setOption(optionType,true);

    }

    $(document).ready(function() {
      //时间控件初始化
        //显示日期：
        $('#display-date').datepicker({
            format: 'yyyy-mm-dd', //格式
            autoclose: true, //选中之后自动隐藏日期选择框
            todayHighlight: true, //当日  高亮  自动定位到当日
            language: 'zh-CN', //语言
            orientation: 'button',
            clearBtn:true,
        });
        //对比日期
        $('#comparison-date').datepicker({
            format: 'yyyy-mm-dd', //格式
            autoclose: true, //选中之后自动隐藏日期选择框
            todayHighlight: true, //当日  高亮  自动定位到当日
            language: 'zh-CN', //语言
            orientation: 'button',
            clearBtn:true,
        });
        //erchat图表代码**
        chartRender('chainmakerBlockCounter',[],'区块高度');
        chartRender('chainmakerTxPoolSize',[],'交易池数量');
        chartRender('chainmakerTxCounter',[],'交易数');
        chartRender('chainmakerAvgBlockSize',[],'平均块大小');
        chartRender('chainmakerAvgBlockOutput',[],'平均出块周期');
        chartRender('chainmakerAvgTps',[],'平均TPS');
    }) 
</script>
</body>
</html>